/**  页面 **/
// 内、外边距[1-60]
@for $i from 0 through 60 {
  // 只要偶数和能被5整除的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 如：m-30
    .m-#{$i} {
      margin: $i + px;
    }

    // 如：p-30
    .p-#{$i} {
      padding: $i + px;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      //如： m-l-6
      // 外边距
      .m-#{$short}-#{$i},
      .m#{$short}-#{$i} {
        margin-#{$long}: $i + px;
      }

      //如： p-l-30
      // 内边距
      .p-#{$short}-#{$i},
      .p#{$short}-#{$i} {
        padding-#{$long}: $i + px;
      }
    }
  }
}
//模块背景
.background-color-primary,
.bc-primary {
  background-color: var(--color-primary);
}
.background-color-success,
.bc-success {
  background-color: var(--color-success);
}
.background-color-warning,
.bc-warning {
  background-color: var(--color-warning);
}
.background-color-danger,
.bc-danger {
  background-color: var(--color-danger);
}
.background-color-info,
.bc-info {
  background-color: var(--color-info);
}
.background-color-main,
.bc-main {
  background-color: var(--color-bg-1);
}
.background-color-secondary,
.bc-secondary {
  background-color: var(--color-bg-2);
}
.background-color-placeholder,
.bc-placeholder {
  background-color: var(--color-bg-3);
}
.background-color-white,
.bc-white {
  background-color: #fff;
}
.background-color-black,
.bc-black {
  background-color: #000;
}
// 颜色[1-9]
// @for $i from 1 through 9 {
// }

// 模块阴影
.block-shadow-sm,
.bs-sm {
  box-shadow: var(--shadow-sm);
}
.block-shadow-md,
.bs-md {
  box-shadow: var(--shadow-md);
}
.block-shadow-lg,
.bs-lg {
  box-shadow: var(--shadow-lg);
}
// 模块圆角
.block-radius-sm,
.br-sm {
  border-radius: var(--radius-sm);
}
.block-radius-md,
.br-md {
  border-radius: var(--radius-md);
}
.block-radius-lg,
.br-lg {
  border-radius: var(--radius-lg);
}

// 屏幕尺寸
// @for $i from 1 through 9 {
//   .screen-#{$i} {
//     width: 100% / $i;
//   }
// }